﻿@{
    Layout = "~/Views/Shared/_CommonLayout.cshtml";
}
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XjOymLQ7XokpmPICKh0xlSyw"></script>
<script type="text/javascript" src="~/Scripts/project/MonitorCenterMap.js"></script>

<script type="text/javascript" src="~/Scripts/jquery-easyui/jquery.easyui.min.js"></script>
<link type="text/css" href="~/Scripts/jquery-easyui/themes/default/easyui.css" rel="stylesheet" />
<link type="text/css" href="~/Scripts/jquery-easyui/themes/icon.css" rel="stylesheet" />
<style type="text/css">
    body
    {
        display:-moz-box;
        display:-webkit-box;
	    display:box;
        display:-ms-flexbox;
	    -moz-box-orient:vertical;
	    -webkit-box-orient:vertical;
	    box-orient:vertical;
        -ms-flex-direction:column;
    }
</style>
<div id="HistoryTrackDiv" class="MonitorFlexBox-V MonitorFlex-1">
    <input type="hidden" id="BasicInfoInput" value="@ViewBag.InfoModel" />
    <div id="ConditionDiv" class="MonitorFlexBox-H">
        <fieldset id="VehicleCondition" >
            <legend>1.车辆条件</legend>
            <div class="MonitorFlexBox-H">
                <input type="text" id="VehicleNameInput"  readonly="true"/>
@*                <div class="ImgButton MonitorFlexBox-H">
                    <img src="~/Images/query.png"  />
                    <span>选择</span>
                </div>*@
            </div>
        </fieldset>
        <fieldset id="TrackOperate">
            <legend>2.跟踪操作</legend>
            <div class="MonitorFlexBox-H">
                <div id="StartTrack" class="ImgButton MonitorFlexBox-H">
                    <img src="~/Images/start_play.png"  />
                    <span>开始跟踪</span>
                </div>
                <div id="StopTrack" class="ImgButton MonitorFlexBox-H">
                    <img src="~/Images/stop_play.png" />
                    <span>停止跟踪</span>
                </div>
            </div>
        </fieldset>
    </div>
    <div id="ResizableDiv" class="MonitorFlexBox-V">
        <div id="HistoryTrackMapDiv" class="MonitorFlex-1"></div>
    </div>
    <div id="TrackDataDiv" class="MonitorFlex-1">
        <table id="GpsTable" class="easyui-datagrid"
                rownumbers="true"
                singleSelect="true"
                striped="true"
                loadMsg=""
                fit="true"
                data-options="onDblClickRow:OnDblClickRow">
                <thead>
                    <tr>
                        <th field="name">车牌号</th>
                        <th field="sim">SIM卡号</th>
                        <th field="depart">所属单位</th>
                        <th field="lng">经度</th>
                        <th field="lat">纬度</th>
                        <th field="addr">地址</th>
                        <th field="gpsSpeed">GPS速度</th>
                        <th field="gpsMileage">GPS里程</th>
                        <th field="devSpeed">仪表速度</th>
                        <th field="devMileage">仪表里程</th>
                        <th field="oil">油量</th>
                        <th field="state0">ACC</th>
                        <th field="state41">正反转</th>
                        <th field="dire">方向</th>
                        <th field="time">上传时间</th>
                    </tr>
                </thead>
            </table>
    </div>
</div>
<script type="text/javascript">
    var basicInfo;
    var lastTime = "1990-01-01 00:00:00";//最近接受时间
    var index = 0;
    var isStart = false;
    $(document).ready(function () {
        InitResizable()
        InitBaiduMap("武汉市", 14, "HistoryTrackMapDiv", false);
        //窗口放大缩小时
        $(window).resize(function () {
            InitResizable();
        });
        //开始跟踪
        $("#StartTrack").click(function () {
            if (isStart == false) {
                isStart = true;
                GetRealTimeData();
            }
            else {
                artDialogAlert("已经开始对《" + basicInfo.name + "》的跟踪");
            }
        });
        //停止跟踪
        $("#StopTrack").click(function () {
            if (isStart == true) {
                isStart = false;
                $("#GpsTable").datagrid("loadData", { total: 0, rows: [] });
                lastTime = "1990-01-01 00:00:00";
                index = 0;
                ClearTrackMarker();
            }
        });
        basicInfo = $.parseJSON($("#BasicInfoInput").val());
        $("#VehicleNameInput").val(basicInfo.name);
    });

    //初始化resizable
    function InitResizable() {
        var height = $("#HistoryTrackDiv").height() - $("#ConditionDiv").height() - 30;
        $("#ResizableDiv").height(height * 3 / 4);
        $("#ResizableDiv").resizable({
            minHeight: 10,
            maxHeight: height,
            handles: "s",
            onResize: OnResize
        });
        OnResize();
    }
    //onResize
    function OnResize() {
        var newWidth = $("#TrackDataDiv").width();
        var newHeight = $("#TrackDataDiv").height();
        $("#GpsTable").datagrid("resize", {
            width: newWidth,
            height: newHeight
        });
    }

    //获取实时数据
    function GetRealTimeData() {
        if(isStart == false){
            return;
        }
        var times = [];
        var sims = [];
        times.push(lastTime);
        sims.push(basicInfo.sim);
        $.ajax({
            type: "post",
            url: "/MonitorCenter/GetGpsData",
            data: {
                "sims": sims,
                "times": times
            },
            traditional: true,
            success: function (data) {
                if (data != null && data.total != 0 && isStart == true) {
                    //更新有最新gps数据的车辆
                    for (var i = 0; i < data.rows.length; i++) {
                        if (basicInfo.sim == data.rows[i].sim) {
                            var tmp = $.extend(true, {}, basicInfo);
                            tmp.lng = data.rows[i].lng;//经度
                            tmp.lat = data.rows[i].lat;//纬度
                            tmp.addr = data.rows[i].addr;//地址
                            tmp.dire = data.rows[i].dire;//方向
                            tmp.gpsSpeed = data.rows[i].gpsSpeed;//GPS速度
                            tmp.gpsMileage = data.rows[i].gpsMileage;//gps里程
                            tmp.devSpeed = data.rows[i].devSpeed;//仪表速度
                            tmp.devMileage = data.rows[i].devMileage;//仪表里程
                            tmp.oil = data.rows[i].oil;//油量
                            tmp.state0 = data.rows[i].state0;//acc
                            tmp.state41 = data.rows[i].state41;//正反转
                            tmp.time = data.rows[i].time;//上传时间

                            AddVehicleToDataGrid(tmp);//更新到DataGrid
                        }
                    }
                }
                GetRealTimeData();
            }
        });
    }
    //增加一部车辆信息到DataGrid
    function AddVehicleToDataGrid(rowData) {
        if (rowData != null) {
            $("#GpsTable").datagrid("appendRow", rowData);
            AddTrackMarker(rowData);
            $("#GpsTable").datagrid("selectRow", index);
            $("#GpsTable").datagrid("scrollTo", index);
            $("#GpsTable").datagrid("autoSizeColumn");//调整列宽
            lastTime = rowData.time;
            index++;
        }
    }
    //双击实时数据,获取焦点
    function OnDblClickRow(rowIndex, rowData) {
        TrackFocusMarker(rowData);
    }
</script>
